<template>
  <div>
    <div class="card">
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="promptMessage.maximumScreenSpaceError"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >maximumScreenSpaceError
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            :max="128"
            :min="0"
            v-model="inputData.maximumScreenSpaceError"
            show-input
            size="small"
            @input="onChangeProperty($event, 'maximumScreenSpaceError')"
          />
        </div>
      </div>
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="promptMessage.progressiveResolutionHeightFraction"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >progressiveResolutionHeightFraction
        </div>
        <div class="row-input">
          <el-slider
            :step="0.0001"
            :max="0.5"
            :min="0"
            v-model="inputData.progressiveResolutionHeightFraction"
            show-input
            size="small"
            @input="
              onChangeProperty($event, 'progressiveResolutionHeightFraction')
            "
          />
        </div>
      </div>
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.dynamicScreenSpaceError"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >dynamicScreenSpaceError:
          <el-checkbox
            @change="onChangeProperty($event, 'dynamicScreenSpaceError')"
            v-model="inputData.dynamicScreenSpaceError"
            size="small"
          />
        </div>
      </div>
      <div class="row" v-if="inputData.dynamicScreenSpaceError">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="promptMessage.dynamicScreenSpaceErrorDensity"
            placement="right"
            raw-content
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >dynamicScreenSpaceErrorDensity
        </div>
        <div class="row-input">
          <el-slider
            :step="0.0001"
            :max="1"
            :min="0"
            v-model="inputData.dynamicScreenSpaceErrorDensity"
            show-input
            size="small"
            @input="onChangeProperty($event, 'dynamicScreenSpaceErrorDensity')"
          />
        </div>
      </div>
      <div class="row" v-if="inputData.dynamicScreenSpaceError">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="promptMessage.dynamicScreenSpaceErrorFactor"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >dynamicScreenSpaceErrorFactor
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            :max="10"
            :min="1"
            v-model="inputData.dynamicScreenSpaceErrorFactor"
            show-input
            size="small"
            @input="onChangeProperty($event, 'dynamicScreenSpaceErrorFactor')"
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.maximumMemoryUsage"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >maximumMemoryUsage:
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            :max="4096"
            :min="512"
            v-model="inputData.maximumMemoryUsage"
            show-input
            size="small"
            @input="onChangeProperty($event, 'maximumMemoryUsage')"
          />
        </div>
      </div>
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.preloadWhenHidden"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >preloadWhenHidden:
          <el-checkbox
            @change="onChangeProperty($event, 'preloadWhenHidden')"
            v-model="inputData.preloadWhenHidden"
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.cullWithChildrenBounds"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >cullWithChildrenBounds:
          <el-checkbox
            @change="onChangeProperty($event, 'cullWithChildrenBounds')"
            v-model="inputData.cullWithChildrenBounds"
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.cullRequestsWhileMoving"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >cullRequestsWhileMoving:
          <el-checkbox
            @change="onChangeProperty($event, 'cullRequestsWhileMoving')"
            v-model="inputData.cullRequestsWhileMoving"
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.cullRequestsWhileMovingMultiplier">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.cullRequestsWhileMovingMultiplier"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >cullRequestsWhileMovingMultiplier:
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            v-model="inputData.cullRequestsWhileMovingMultiplier"
            show-input
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="row">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.skipLevelOfDetail"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >skipLevelOfDetail:
          <el-checkbox
            @change="onChangeProperty($event, 'skipLevelOfDetail')"
            v-model="inputData.skipLevelOfDetail"
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.skipLevelOfDetail">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.skipLevels"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >skipLevels:
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            v-model="inputData.skipLevels"
            show-input
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.skipLevelOfDetail">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.skipScreenSpaceErrorFactor"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >skipScreenSpaceErrorFactor:
        </div>
        <div class="row-input">
          <el-slider
            :step="1"
            v-model="inputData.skipScreenSpaceErrorFactor"
            show-input
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.skipLevelOfDetail">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.loadSiblings"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >loadSiblings:
          <el-checkbox
            @change="onChangeProperty($event, 'loadSiblings')"
            v-model="inputData.loadSiblings"
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.skipLevelOfDetail">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.immediatelyLoadDesiredLevelOfDetail"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >immediatelyLoadDesiredLevelOfDetail:
          <el-checkbox
            @change="
              onChangeProperty($event, 'immediatelyLoadDesiredLevelOfDetail')
            "
            v-model="inputData.immediatelyLoadDesiredLevelOfDetail"
            size="small"
          />
        </div>
      </div>
      <div class="row" v-show="inputData.skipLevelOfDetail">
        <div class="flex-center">
          <el-tooltip
            class="box-item"
            effect="dark"
            raw-content
            :content="promptMessage.preferLeaves"
            placement="right"
          >
            <SvgIcon class="tooltip-icon" icon="explain" /> </el-tooltip
          >preferLeaves:
          <el-checkbox
            @change="onChangeProperty($event, 'preferLeaves')"
            v-model="inputData.preferLeaves"
            size="small"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  defineExpose,
  ref,
  reactive,
  computed,
} from "vue";
import { getTileById } from "../../../../../../static/CIM/BQGIS-load/index";
import SvgIcon from "../../../../../components/SvgIcon.vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  tileId: {
    type: String,
  },
});
const inputData = reactive({});

defineExpose({ inputData });

let currentLayer = null;
const promptMessage = {
  maximumScreenSpaceError:
    "用于驱动细节细化程度的最大屏幕空间错误,值越小,渲染精度越高,渲染越慢,对硬件性能消耗越高",
  progressiveResolutionHeightFraction: "数值偏于0能够让初始加载变得模糊",
  dynamicScreenSpaceError: `瓦片是否应根据动态屏幕空间误差进行细化。<br/>
    距离较远的瓦片将以较低的细节进行渲染。<br/>
    这通过渲染更少的瓦片和提出更少的请求来提高性能，但可能会导致远处的瓦片的视觉质量略有下降。<br/>
    该算法偏向于 "街景"，即相机靠近瓷砖集的地平面并看着地平线。此外，对于像盒子和区域这样紧密贴合的边界体来说，结果更准确`,
  dynamicScreenSpaceErrorDensity: `是一种标量，决定用于调整动态屏幕空间误差的密度，类似于迷雾。<br/>
  增加该值效果是提高所有瓦片的最大屏幕空间误差，以非线性的方式。<br/>
  这样做的目的是在较近的瓦片上保持较高的细节，而在较远的瓦片上保持较低的细节，超过一定距离的所有瓦片都大致有1.0的误差。<br/>
  数值加大，能让周边加载变快，远处瓦片更模糊。<br/>
  动态误差的范围是[0.0, 1.0]，并乘dynamicScreenSpaceErrorFactor来产生最终的动态误差。这个动态误差再减去瓦片的实际屏幕空间误差`,
  dynamicScreenSpaceErrorFactor:
    "增加动态屏幕错误（dynamicScreenSpaceErrorDensity）的一个因子。",
  maximumMemoryUsage: `当几何体和纹理资源大于设置的值时(单位为MB)，Cesium就会淘汰掉当前帧中没有visited的所有块。<br/>
    这个值如果设置的过小，导致Cesium几乎每帧都在尝试淘汰数据，增加了遍历的时间，也同时增加了崩溃的风险。<br/>
    这个值如果设置的过大，Cesium的淘汰机制失效，那么容易导致显存超过显卡内存，也会导致崩溃。<br/>
    这个值应该处于最差视角下资源占用 和 显存最大量之间。`,
  preloadWhenHidden:
    "当titleset.show=false(模型隐藏)时，预加载瓦片。实际建一缓存区，存储瓦片数据，不渲染。",
  preferLeaves: "叶子节点优先加载",
  skipLevelOfDetail: `使用分层细节层次 (HLOD) 来自适应地加载和优化 3D 模型。<br/>
    这样做允许引擎在远离相机时渲染低分辨率瓦片，而在靠近相机时渲染高分辨率瓦片。`,
  skipLevels: `当skipLevelOfDetail=true时生效，一个定义加载图块要跳过最小级别数的常量。
    <br/>为0时，不会跳过任何级别。与一起使用skipScreenSpaceErrorFactor以确定要加载的图块`,
  skipScreenSpaceErrorFactor:
    "当skipLevelOfDetail=true时生效，乘数定义要跳过的最小屏幕空间错误。与一起使用skipLevels以确定要加载的图块",
  immediatelyLoadDesiredLevelOfDetail:
    "当skipLevelOfDetail=true时生效，只有tileset满足最大屏幕空间误差都不会被下载。跳过因子将被忽略，仅加载所需的图块",
  loadSiblings:
    "当skipLevelOfDetail=true时生效，如果为true，则不会在已加载完模型后，自动从中心开始超清化模型",
  cullWithChildrenBounds:
    "是否使用子项边界体积的并集来剔除图块，默认true。cesium如果想要平面裁切，建议关闭。",
  cullRequestsWhileMoving:
    "不请求那些很可能由于相机移动而在返回时可能未使用的图块，默认为true",
  cullRequestsWhileMovingMultiplier:
    "优化选项。移动时用于剔除请求的乘数。较大的是更积极的剔除，较小的较不积极的剔除。默认值为60",
};

onChangeLayer();

function onChangeLayer() {
  currentLayer = getTileById(props.tileId);
  if (currentLayer) {
    const tile = currentLayer.tileset;
    (inputData.id = props.tileId),
      (inputData.maximumScreenSpaceError = tile.maximumScreenSpaceError),
      (inputData.maximumMemoryUsage = tile.maximumMemoryUsage),
      (inputData.preloadWhenHidden = tile.preloadWhenHidden),
      (inputData.preferLeaves = tile.preferLeaves),
      (inputData.skipLevelOfDetail = tile.skipLevelOfDetail),
      (inputData.skipLevels = tile.skipLevels),
      (inputData.skipScreenSpaceErrorFactor = tile.skipScreenSpaceErrorFactor),
      (inputData.immediatelyLoadDesiredLevelOfDetail =
        tile.immediatelyLoadDesiredLevelOfDetail),
      (inputData.loadSiblings = tile.loadSiblings),
      (inputData.cullWithChildrenBounds = tile.cullWithChildrenBounds),
      (inputData.cullRequestsWhileMoving = tile.cullRequestsWhileMoving),
      (inputData.cullRequestsWhileMovingMultiplier =
        tile.cullRequestsWhileMovingMultiplier),
      (inputData.progressiveResolutionHeightFraction =
        tile.progressiveResolutionHeightFraction),
      (inputData.dynamicScreenSpaceError = tile.dynamicScreenSpaceError),
      (inputData.dynamicScreenSpaceErrorDensity =
        tile.dynamicScreenSpaceErrorDensity),
      (inputData.dynamicScreenSpaceErrorFactor =
        tile.dynamicScreenSpaceErrorFactor);
  }
}

function onChangeProperty(value, key) {
  currentLayer.tileset[key] = value;
  if (viewer.scene.requestRenderMode) {
    viewer.scene.requestRender();
  }
}
</script>

<style lang="scss" scoped>
.tooltip-icon {
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  margin-right: 3px;
}
.row {
  color: #fff;
  margin: 15px 0;
  .row-input {
    margin-left: 20px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
}
.card {
  background-color: rgba($color: #000, $alpha: 0.4);
  margin: 10px;
  padding: 2px 10px;
}
.el-col {
  display: flex;
  align-items: center;
}
</style>